<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div class="container" id="videoPlayer">
        <div class="sideBar">
            <span class="no-padding">
                <img src="img/home.png" class="left" id="btnHome" title="Visit My Homepage" onclick="window.open('https://www.baidu.com')" />
            </span>
            <div id="input">
                <!-- <select id="protocol" onchange="onSelectProto()">
                    <option value="ws">WS</option>
                    <option value="http">HTTP</option>
                    <option value="httpFlv">HTTP-FLV</option>
                </select> -->
                <input type="text" id="inputUrl" style="width:300px"/>
            </div>
        </div>
        <div class="canvasDiv">
            <div class="loadEffect" id="loading" style="display:none;">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <canvas id="playCanvas" width="852" height="480"></canvas>
        </div>
        <div class="sideBar">
            <span class="no-padding">
                <img src="img/play.png" class="left" id="btnPlayVideo" onclick="playVideo()" />
            </span>
            <span class="no-padding" style=" padding-left:5px;">
                <img src="img/stop.png" class="left" id="btnStopVideo" onclick="stopVideo()" />
            </span>
            <span class="track-padding">
            </span>
            <span class="no-padding">
                <input id="timeTrack" type="range" value="0">
            </span>
            <span class="no-padding" style=" padding-left:10px;">
                <label id="timeLabel">00:00:00/00:00:00</label>
            </span>
            <span class="no-padding right">
                <img src="img/fullscreen.png" class="right" id="btnFullscreen" onclick="fullscreen()" />
            </span>
        </div>
    </div>
    <div id="container">
        <video width="600" height="600" autoplay conposter="loader-thumb.jpg" id="player" muted></video>
    </div>
    <div id="footer">Copyright &copy; 2019 All rights reserved.</div>
    <script type='text/javascript' src="common.js"></script>
    <script type='text/javascript' src="pcm-player.js"></script>
    <script type='text/javascript' src="webgl.js"></script>    
    <script type='text/javascript' src="myplayer.js"></script>    
    <script>
        var inputUrl = document.getElementById("inputUrl");
        inputUrl.value = "ws://192.168.50.122:8888";
        var videoId = 'player'
        var profile = 1;
        const canvasId = "playCanvas";
        var canvas = document.getElementById(canvasId);
        var player = null;
        // player.setDebug(true);
        function playVideo() {
            stopVideo();
            var inputUrl = document.getElementById("inputUrl");
            player = new Player(canvas, inputUrl.value, videoId, profile);
            console.log('url:' + inputUrl.value);
            player.play();
        }

        function stopVideo() {
            if(player) {
                player.destroy();
                player = null;
            }
        }
        function onSelectProto() {
            // var protoList = document.getElementById("protocol");
            // var proto = protoList.options[protoList.selectedIndex].value;
            // var protoObj = defaultProtos[proto];
            // var inputUrl = document.getElementById("inputUrl");
            // inputUrl.value = protoObj["url"];
        }

    </script>
</body>
</html>